<template>
<div>
  <h1>当前求和为：{{sum}}</h1>
  <h3>当前求和放大10倍为：{{bigSum}}</h3>
  <h3>我在{{school}}，学习{{subject}}</h3>
  <h3>Person组件的总人数为：{{personList.length}}</h3>
  <select v-model.number="n">
    <option :value="1">1</option>
    <option :value="2">2</option>
    <option :value="3">3</option>
  </select>
  <button @click="add(n)">+</button>
  <button @click="less(n)">-</button>
  <button @click="odd(n)">当前求和为奇数再加</button>
  <button @click="wait(n)">等一等再加</button>
</div>
</template>

<script>
import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'
export default {
name: "Count",
  data(){
  return{
    n:1//用户选择的数字
  }
  },
  computed:{
  //借助mapstate生成计算属性，对象写法
  // ...mapState({sum:'sum',school:'school',subject:'subject'}),
  //   ...mapGetters({bigSum:'bigSum'})
    //数组写法
    ...mapState('countOptions',['sum','school','subject']),
    ...mapState('personOptions',['personList']),
    ...mapGetters('countOptions',['bigSum'])
  },
  methods:{
  // add(){
  //  this.$store.commit('JIA',this.n)
  // },
  //   less(){
  //     this.$store.commit('JIAN',this.n)
  //   },
    //借助mapMutations生成对应的方法，方法中会调用commit去联系states（对象）
    ...mapMutations('countOptions',{add:'JIA',less:'JIAN'}),
    // //数组
    // ...mapMutations(['JIA','JIAN']),

    // odd() {
    //   this.$store.dispatch('ji',this.n)
    // },
    // wait(){
    //   this.$store.dispatch('jii',this.n)
    // }
    //对象写法，借助mapActions生成对应的方法，方法中会调用dispatch
    ...mapActions('countOptions',{odd:'ji',wait:'jii'}),
    //数组写法
    // ...mapActions(['ji','jii'])
  }
}
</script>

<style scoped>

</style>